<template>
  <div id="app">
    <!-- 头部导航 -->
    <header class="header" :class="{ 'header-scrolled': isScrolled }">
      <div class="container">
        <div class="nav-wrapper">
          <div class="logo">
            <img class="logo-img" :src="logoUrl" alt="易联捷 Logo" />
            <h2 class="company-name">易联捷数字技术有限公司</h2>
          </div>
          <nav class="nav">
            <ul class="nav-list">
              <li class="nav-item">
                <a href="#home" class="nav-link active">首页</a>
              </li>
              <li class="nav-item dropdown">
                <a href="#about" class="nav-link">关于我们</a>
                <ul class="dropdown-menu">
                  <li><a href="#company">公司简介</a></li>
                  <li><a href="#culture">企业文化</a></li>
                  <li><a href="#team">团队介绍</a></li>
                  <li><a href="#history">发展历程</a></li>
                </ul>
              </li>
              <li class="nav-item dropdown">
                <a href="#products" class="nav-link">产品服务</a>
                <ul class="dropdown-menu">
                  <li><a href="#data-analysis">数据分析平台</a></li>
                  <li><a href="#ai-service">AI智能服务</a></li>
                  <li><a href="#cloud-service">云端数据服务</a></li>
                  <li><a href="#data-security">数据安全</a></li>
                </ul>
              </li>
              <li class="nav-item dropdown">
                <a href="#solutions" class="nav-link">解决方案</a>
                <ul class="dropdown-menu">
                  <li><a href="#healthcare">医疗行业</a></li>
                  <li><a href="#finance">金融行业</a></li>
                  <li><a href="#education">教育行业</a></li>
                  <li><a href="#retail">零售行业</a></li>
                </ul>
              </li>
              <li class="nav-item">
                <a href="#news" class="nav-link">新闻资讯</a>
              </li>
              <li class="nav-item">
                <a href="#contact" class="nav-link">联系我们</a>
              </li>
            </ul>
          </nav>
          <div class="mobile-menu-btn" @click="toggleMobileMenu">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <main>
      <!-- 轮播图区域 -->
      <section id="home" class="hero-section">
        <div class="hero-slider">
          <div class="slide" :class="{ active: currentSlide === 0 }" style="background-image: url('./images/slide1.svg');">
            <div class="slide-overlay"></div>
            <div class="slide-content">
              <div class="container">
                <h1 class="hero-title">智能医疗设备</h1>
                <p class="hero-subtitle">易联捷数字技术致力于为医疗机构提供专业的数据解决方案</p>
                <button class="cta-button">了解更多</button>
              </div>
            </div>
          </div>
          <div class="slide" :class="{ active: currentSlide === 1 }" style="background-image: url('./images/slide2.svg');">
            <div class="slide-overlay"></div>
            <div class="slide-content">
              <div class="container">
                <h1 class="hero-title">数据驱动决策</h1>
                <p class="hero-subtitle">运用先进的AI技术，为您的业务提供深度洞察</p>
                <button class="cta-button">探索产品</button>
              </div>
            </div>
          </div>
          <div class="slide" :class="{ active: currentSlide === 2 }" style="background-image: url('./images/slide3.svg');">
            <div class="slide-overlay"></div>
            <div class="slide-content">
              <div class="container">
                <h1 class="hero-title">云端服务</h1>
                <p class="hero-subtitle">安全可靠的云端数据存储与处理服务</p>
                <button class="cta-button">立即体验</button>
              </div>
            </div>
          </div>
        </div>
        <div class="slider-controls">
          <button 
            v-for="(slide, index) in 3" 
            :key="index"
            class="slider-dot"
            :class="{ active: currentSlide === index }"
            @click="currentSlide = index"
            @mouseenter="currentSlide = index"
            :aria-label="`切换到第${index + 1}张`"
          ></button>
        </div>
      </section>

      <!-- 关于我们 -->
      <section id="about" class="about-section">
        <div class="container">
          <div class="section-header">
            <h2 class="section-title">关于易联捷</h2>
            <p class="section-subtitle">专业的数据科技服务提供商</p>
          </div>
          <div class="about-content">
            <div class="about-text">
              <p>易联捷数字技术有限公司是一家专注于数据科技领域的创新企业，致力于为各行业客户提供专业的数据解决方案。我们拥有一支经验丰富的技术团队，在大数据分析、人工智能、云计算等领域具有深厚的技术积累。</p>
              <p>公司秉承"数据驱动未来"的理念，通过先进的技术手段帮助企业实现数字化转型，提升业务效率和竞争力。</p>
            </div>
            <div class="about-stats">
              <div class="stat-item">
                <h3>500+</h3>
                <p>服务客户</p>
              </div>
              <div class="stat-item">
                <h3>10+</h3>
                <p>行业经验</p>
              </div>
              <div class="stat-item">
                <h3>100+</h3>
                <p>成功案例</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 产品服务 -->
      <section id="products" class="products-section">
        <div class="container">
          <div class="section-header">
            <h2 class="section-title">产品与服务</h2>
            <p class="section-subtitle">全方位的数据科技解决方案</p>
          </div>
          <div class="products-grid">
            <div class="product-card">
              <div class="product-icon">📊</div>
              <h3>数据分析平台</h3>
              <p>提供强大的数据分析和可视化工具，帮助企业深度挖掘数据价值</p>
            </div>
            <div class="product-card">
              <div class="product-icon">🤖</div>
              <h3>AI智能服务</h3>
              <p>基于机器学习和深度学习技术，提供智能化的业务解决方案</p>
            </div>
            <div class="product-card">
              <div class="product-icon">☁️</div>
              <h3>云端数据服务</h3>
              <p>安全可靠的云端数据存储、处理和管理服务</p>
            </div>
            <div class="product-card">
              <div class="product-icon">🔒</div>
              <h3>数据安全</h3>
              <p>全面的数据安全保护方案，确保企业数据资产安全</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 新闻资讯 -->
      <section id="news" class="news-section">
        <div class="container">
          <div class="section-header">
            <h2 class="section-title">新闻资讯</h2>
            <p class="section-subtitle">了解最新的行业动态和公司资讯</p>
          </div>
          <div class="news-grid">
            <article class="news-card">
              <div class="news-date">2024-01-15</div>
              <h3>易联捷发布新一代数据分析平台</h3>
              <p>全新的数据分析平台集成了最新的AI技术，为企业提供更智能的数据洞察...</p>
            </article>
            <article class="news-card">
              <div class="news-date">2024-01-10</div>
              <h3>公司荣获"年度最佳数据科技企业"奖项</h3>
              <p>在2024年度科技创新大会上，易联捷凭借在数据科技领域的突出贡献...</p>
            </article>
            <article class="news-card">
              <div class="news-date">2024-01-05</div>
              <h3>与知名企业达成战略合作</h3>
              <p>易联捷与多家知名企业签署战略合作协议，共同推进数字化转型...</p>
            </article>
          </div>
        </div>
      </section>
    </main>

    <!-- 底部信息 -->
    <footer class="footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-section">
            <h3>易联捷数字技术有限公司</h3>
            <p>专业的数据科技服务提供商</p>
            <div class="contact-info">
              <p>📧 info@yilianjie.com</p>
              <p>📞 400-123-4567</p>
              <p>📍 北京市朝阳区科技园区</p>
            </div>
          </div>
          <div class="footer-section">
            <h4>产品服务</h4>
            <ul>
              <li><a href="#products">数据分析平台</a></li>
              <li><a href="#products">AI智能服务</a></li>
              <li><a href="#products">云端数据服务</a></li>
              <li><a href="#products">数据安全</a></li>
            </ul>
          </div>
          <div class="footer-section">
            <h4>关于我们</h4>
            <ul>
              <li><a href="#about">公司简介</a></li>
              <li><a href="#news">新闻资讯</a></li>
              <li><a href="#contact">联系我们</a></li>
              <li><a href="#">招贤纳士</a></li>
            </ul>
          </div>
          <div class="footer-section">
            <h4>关注我们</h4>
            <div class="social-links">
              <a href="#" class="social-link">微信</a>
              <a href="#" class="social-link">微博</a>
              <a href="#" class="social-link">LinkedIn</a>
            </div>
          </div>
        </div>
        <div class="footer-bottom">
          <p>&copy; 2024 易联捷数字技术有限公司. 保留所有权利.</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const currentSlide = ref(0)
const mobileMenuOpen = ref(false)
const isScrolled = ref(false)
const logoUrl = './images/company-logo.png'

// 轮播图自动切换
let slideInterval = null

const startSlideShow = () => {
  slideInterval = setInterval(() => {
    currentSlide.value = (currentSlide.value + 1) % 3
  }, 5000)
}

const stopSlideShow = () => {
  if (slideInterval) {
    clearInterval(slideInterval)
    slideInterval = null
  }
}

const toggleMobileMenu = () => {
  mobileMenuOpen.value = !mobileMenuOpen.value
}

// 监听滚动事件
const handleScroll = () => {
  isScrolled.value = window.scrollY > 50
}

onMounted(() => {
  startSlideShow()
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  stopSlideShow()
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 头部样式 */
.header {
  background: transparent;
  box-shadow: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  transition: all 0.3s ease;
  padding: 0;
  pointer-events: none; /* 默认状态下不阻挡鼠标事件 */
}

.header .nav-wrapper {
  pointer-events: auto; /* 导航内容可以接收鼠标事件 */
}

.header:hover {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0,0,0,0.1);
  z-index: 1000; /* 悬停时提高层级 */
}

.header:hover .nav-link {
  color: #555;
}

.header:hover .nav-link:hover,
.header:hover .nav-link.active {
  color: #0066cc;
}

.header:hover .company-name {
  color: #0066cc;
}

.header:hover .mobile-menu-btn span {
  background: #333;
}

.header.header-scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}

.header.header-scrolled .nav-link {
  color: #555;
}

.header.header-scrolled .nav-link:hover,
.header.header-scrolled .nav-link.active {
  color: #0066cc;
}

.header.header-scrolled .company-name {
  color: #0066cc;
}

.header.header-scrolled .mobile-menu-btn span {
  background: #333;
}

.nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

/* Logo容器与图片样式 */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.company-name {
  color: white;
  font-size: 1.5rem;
  font-weight: 600;
  transition: color 0.3s ease;
  margin: 0;
}

.logo-img {
  height: 1.5rem; /* 与文字高度保持一致 */
  width: auto;
  display: block;
  transition: filter 0.3s ease;
}

/* hover和滚动状态下的logo样式 */
.header:hover .logo-img,
.header.header-scrolled .logo-img {
  filter: brightness(0) saturate(100%) invert(26%) sepia(100%) saturate(4174%) hue-rotate(201deg) brightness(99%) contrast(101%);
}

.nav-list {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.nav-item {
  position: relative;
}

.nav-link {
  text-decoration: none;
  color: white;
  font-weight: 500;
  transition: color 0.3s ease;
  padding: 0.5rem 0;
  display: block;
}

.nav-link:hover,
.nav-link.active {
  color: #64b5f6;
}

/* 二级菜单样式 */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 200px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  list-style: none;
  padding: 0.5rem 0;
  z-index: 1001;
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu li {
  margin: 0;
}

.dropdown-menu a {
  color: #333;
  padding: 0.75rem 1.5rem;
  display: block;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.dropdown-menu a:hover {
  background: #f8f9fa;
  color: #0066cc;
}

.nav-link:hover,
.nav-link.active {
  color: #64b5f6;
}

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.mobile-menu-btn span {
  width: 25px;
  height: 3px;
  background: white;
  margin: 3px 0;
  transition: 0.3s;
}

.header.header-scrolled .mobile-menu-btn span {
  background: #333;
}

/* 主要内容区域 */
main {
  margin-top: 0;
}

/* 轮播图样式 */
.hero-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
  z-index: 1; /* 确保轮播图在导航栏下方 */
  padding-top: 0;
  padding-bottom: 0;
}

.hero-slider {
  position: relative;
  height: 100%;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide.active {
  opacity: 1;
}

.slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.slide-content {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  color: white;
  text-align: center;
  z-index: 2;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.hero-subtitle {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.cta-button {
  background: rgba(255,255,255,0.2);
  color: white;
  border: 2px solid white;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cta-button:hover {
  background: white;
  color: #333;
}

.slider-controls {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 15px;
  z-index: 100; /* 确保指示器在轮播图上方 */
}

.slider-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  background: rgba(255,255,255,0.12);
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider-dot:hover {
  border-color: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

.slider-dot.active {
  background: rgba(255, 255, 255, 1);
  border-color: white;
  transform: scale(1.2);
}

.slider-dot.active {
  background: white;
}

/* 通用section样式 */
section {
  padding: 5rem 0;
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 1rem;
}

.section-subtitle {
  font-size: 1.2rem;
  color: #666;
}

/* 关于我们样式 */
.about-section {
  background: #f8f9fa;
}

.about-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  align-items: center;
}

.about-text p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  color: #555;
}

.about-stats {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.stat-item {
  text-align: center;
  padding: 1.5rem;
  background: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.stat-item h3 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #0066cc;
  margin-bottom: 0.5rem;
}

.stat-item p {
  color: #666;
  font-weight: 500;
}

/* 产品服务样式 */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.product-card {
  background: white;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.product-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.product-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1rem;
}

.product-card p {
  color: #666;
  line-height: 1.6;
}

/* 新闻资讯样式 */
.news-section {
  background: #f8f9fa;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.news-card {
  background: white;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.news-card:hover {
  transform: translateY(-5px);
}

.news-date {
  color: #0066cc;
  font-weight: 600;
  margin-bottom: 1rem;
}

.news-card h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.news-card p {
  color: #666;
  line-height: 1.6;
}

/* 底部样式 */
.footer {
  background: #2c3e50;
  color: white;
  padding: 3rem 0 1rem;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-section h3,
.footer-section h4 {
  margin-bottom: 1rem;
  color: #0066cc;
}

.footer-section ul {
  list-style: none;
}

.footer-section ul li {
  margin-bottom: 0.5rem;
}

.footer-section a {
  color: #bbb;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-section a:hover {
  color: white;
}

.contact-info p {
  margin-bottom: 0.5rem;
  color: #bbb;
}

.social-links {
  display: flex;
  gap: 1rem;
}

.social-link {
  padding: 0.5rem 1rem;
  background: #34495e;
  border-radius: 5px;
  transition: background 0.3s ease;
}

.social-link:hover {
  background: #0066cc;
}

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid #34495e;
  color: #bbb;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-list {
    display: none;
  }
  
  .mobile-menu-btn {
    display: flex;
  }
  
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.2rem;
  }
  
  .about-content {
    grid-template-columns: 1fr;
  }
  
  .about-stats {
    flex-direction: row;
    justify-content: space-around;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .products-grid,
  .news-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 15px;
  }
  
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-subtitle {
    font-size: 1rem;
  }
  
  .about-stats {
    flex-direction: column;
  }
}
</style>
